<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="fmt" uri="http://www.springframework.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>销售工作台</title>
    <link rel="stylesheet" type="text/css" href="../../lib/pagination/style/pagination.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/base.css"/>
    <link rel="stylesheet" type="text/css" href="/css/base/base.css?20201106.1"/>
    <link rel="stylesheet" type="text/css" href="../../css/news/center.css"/>
    <link rel="stylesheet" href="/lib/laydate/need/laydate.css">
    <link rel="stylesheet" href="/lib/laydate/skins/default/laydate.css">
    <script type="text/javascript" src="../../js/news/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="/js/base/tablePage.js"></script>
    <script src="../../js/news/page.js"></script>
    <script src="../../js/base/base.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../lib/pagination/js/jquery.pagination.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../lib/layer/layer.js?20201106"></script>
    <script src="../../lib/laydate/laydate.js"></script>

    <style>
        * {font-family: "Microsoft Yahei" !important;}
        .header{
            margin-top: 15px;
            height: 40px;
        }
        .header .title{
            margin-left: 22px;
        }
        .sales{
            float: none;
            /*margin-top: 9px;*/
            font-size: 22px;
            color: #333;
            display: inline-block;
            margin-left: 10px;
            vertical-align: middle;
            margin-top: -6px;
        }
        .content_label{
            line-height: 28px;
            font-size: 15px;
            color: rgb(111, 111, 111);
        }
        .content_label ul li{
            height: 16px;
            line-height: 16px;
            margin-right: 23px;
            font-size: 15px;
            border-radius: 3px;
            display: inline;
        }
        .content_label ul{
            margin: 15px 0;
        }

        .pagediv table thead {
            background: white;
            line-height: 40px;
            border-bottom: 1px #dddddd solid;
            font-size: 13pt;
            color: #2F5C8F;
            font-weight: bold;
            height: 50px;
            border: 0px;
        }
        .pagediv tr:hover {
            background-color: #D3E7FA;
        }
        .pagediv tr:nth-child(odd) {
            background-color: #F6F7F9;
        }
        .pagediv tr:nth-child(odd) {
            background-color: #F6F7F9;
        }
        .queries{
            height: 40px;
        }
        #pageTbody tr{
            height: 40px;
        }
        .editAndDelete1{
            color: red;
        }
        .editAndDelete0{
            color: #2b7fe0;
        }
        #pop-up{
            height: 101%;
            position: fixed;
            top: -2px;
            right: -600px;
            display: none;
        }
        #keyWords{
            width: 155px;
            height: 26px;
            padding-left: 5px
        }
        .index_content_1 .one{
            color: white;
            padding: 4px;
        }
        .index_content_2 .one{
            color: white;
            padding: 4px;
        }

        #add_Excel{
            width: 120px;
            height: 30px;
            border: none;
            color: #fff;
            cursor: pointer;
            padding: 4px;
            padding-left: 35px;
            background-image: url(../../img/import/import.png);
            margin-top: -4px ;
        }
        #customerExport{
            background-image: url(../../img/import/export.png);
            width: 120px;
            height: 30px;
            border: none;
            color: #fff;
            cursor: pointer;
            padding: 4px;
            padding-left: 35px;
            margin-top: -4px ;
        }
        .one{
            width: 120px;
            height: 30px;
            border: none;
            color: #fff;
            cursor: pointer;
            padding: 5px;
        }
        strong{
            font-size: 12pt;
            line-height: 16px;
        }
        #pageTbody tr td{
            color: #2b7fe0;
            cursor: pointer;
        }
        .addSign{
            padding: 5px 24px;
            color: #000000;
            cursor: pointer;
            float: left;
        }
        .navRight{
            display:none
        }
        .clearfix{
            border: 1px solid #4889f0;
            border-radius: 5px;
            margin-top: 15px;
        }
        .navRight ul li.active{
            color: #fff;
            background: #4889f0;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="/css/commonTheme/${sessionScope.InterfaceModel}/commonTheme.css"/>
</head>
<body>
<!--head开始-->
<div class="header">
    <div class="title">
        <img src="/img/commonTheme/${sessionScope.InterfaceModel}/flow_run_title.png"><span class="sales">销售工作台</span>
        <hr style="background-color: black"/>
        <div class="navRight" style="margin-top: -53px;margin-left:160px;width: 205px">
            <ul class="clearfix">
                <li class="addSign active" id="myClient" style="display: block;">我的客户</li>
                <li class="addSign" id="allClient" style="display: block;">下属客户</li>
            </ul>
        </div>
    </div>
</div>
<div style="margin-left: 30px;margin-bottom: 10px">
    <div class="content_label">
        <ul class="index_content_1" style="min-height: 28px"></ul>
        <ul class="index_content_2" style="min-height: 28px"></ul>
        <ul>
            <li class="index_content_3">
                <th><strong>客户来源:</strong></th>
                <td>
                    &nbsp;&nbsp;&nbsp;
                    <select name="customerFrom" style="width: 160px;border-radius:3px;margin-left:-8px;color: #757575;">
                        <option>选择客户来源</option>
                    </select>
                </td>
            </li>
            <li class="index_content_3"></li>
            <li style="padding-left:0px "id="query_time"><strong>创建时间：</strong>&nbsp;
                <input  name="startTime" id="startTime" placeholder="<fmt:message code="sup.th.startTime"/>"  type="text" readonly="readonly" onclick="laydate({istime: true, format: 'YYYY-MM-DD'})" style="padding-left:5px;width: 160px;border-radius: 3px;margin-left:-8px"/>
                &nbsp;&nbsp;<strong><fmt:message code="global.lang.to"/></strong>&nbsp;&nbsp;&nbsp;&nbsp;
                <input  name="endTime"  id="endTime"  placeholder="<fmt:message code="meet.th.EndTime"/>"  type="text"  readonly="readonly" onclick="laydate({istime: true, format: 'YYYY-MM-DD'})" style="padding-left:5px;width: 160px;border-radius: 3px;margin-left:-8px"/>
            </li>

        </ul>
    </div>
    <div class="queries">
        <label>
            <strong >客户名称:</strong>&nbsp;&nbsp;
            <input  placeholder="请输入客户名称" type="text" id="keyWords" style="border-radius: 3px;margin-bottom: 2px;"/>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <button  type="button" class="one" id="query_btn" style="width: 120px">
                <img src="../../img/workflow/worksearch1.png" style="margin-right: 8px;margin-bottom: 2px;"/>查询
            </button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <%--<button  type="button" class="inquire_btn" value="打印二维码" id="printCode" >--%>
            <%--<img src="../../img/mywork/dclist1.png" style="margin-right: 8px;margin-bottom: 2px;"/>打印二维码--%>
            <%--</button>--%>
            <input  type="button" class="inquire_btn" value="导出" id="customerExport" onclick="clicked1();"/>
            <input  type="button" class="inquire_btn" value="导入" id="add_Excel" onclick="javascript:window.location.href='/customer/insertImport';"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <button  type="button" class="one" id="add_btn" style="width: 120px;" onclick="javascript:window.location.href='/customer/addWorkbench';">
                <img src="../../img/mywork/newbuildworjk1.png" style="margin-right: 8px;margin-bottom: 2px;"/>新建
            </button>
        </label>
    </div>
</div>
<div id="pagediv">

</div>
<div id="pop-up" >
    <iframe id="childFrame" style="width: 530px;height: 100%"  frameborder="no" border="0" ></iframe>
</div>
</body>
<script>
    var pageObj;
    var url='/customer/potentialCustomer';
    var deriveUrl='/customer/potentialCustomer?export=1'
    $('.addSign').click(function () {
        $(this).siblings().removeClass('active');
        $(this).addClass('active');
        var val=$(this).attr("id");
        if(val=='allClient'){
            url='/customer/potentialCustomerSole';
            deriveUrl='/customer/potentialCustomerSole?export=1'
        }else if(val=='myClient'){
            url='/customer/potentialCustomer';
            deriveUrl='/customer/potentialCustomer?export=1'
        }
        hideRight()
    })
    // tab切换
    $(".index_content_1").on("click","li",function(){
        $(this).toggleClass("one")
        $(this).siblings('li').removeClass("one");
    });
    $(".index_content_2").on("click","li",function(){
        $(this).toggleClass('one');
        $(this).siblings('li').removeClass("one");
    });
    $(function () {
        client();
        var startTime=new Date().Format('yyyy-MM');
        //select 根据ajax绑定数据 循环显示
        $.ajax({
            url: "/customer/selectByStatus",
            type:'get',
            dataType:"JSON",
            success:function(data){
                var str='<li style="font-weight: bold; pointer-events:none;font-size: 12pt" >客户状态:</li>';
                for (var i=0;i<data.object.length;i++){
                    str += '<li codeNo="'+data.object[i].codeNo+'" style="cursor:pointer;">'+data.object[i].codeName+'</li>'
                }
                $('.index_content_1').html(str);

            }
        })
        $.ajax({
            url: "/customer/selectBySource",
            type:'get',
            dataType:"JSON",
            success:function(data){
                var str='<option value="undefined">请选择客户来源</option>';
                for (var i=0;i<data.obj.length;i++){
                    str += '<option value="'+data.obj[i].codeNo+'">'+data.obj[i].codeName+'</option>'
                }
                $('[name="customerFrom"]').html(str);
            }
        })
        $.ajax({
            url: "/customer/selectByLevel",
            type:'get',
            dataType:"JSON",
            success:function(data){
                var str='<li style="font-weight: bold;pointer-events:none;font-size: 12pt">客户级别:</li>';
                for (var i=0;i<data.object.length;i++){
                    str += '<li codeNo="'+data.object[i].codeNo+'" style="cursor:pointer;">'+data.object[i].codeName+'</li>'
                }
                $('.index_content_2').html(str);
            }
        })

        var screenwidth = document.documentElement.clientWidth;
        if(screenwidth > 1550){
            var nums = screenwidth*0.97;
            var sumwidth = screenwidth*0.97+'px';
        }else{
            var nums = 1120;
            var sumwidth = '1120px';
        }
        var width0 = nums * 0.14 + 'px';
        var width1 = nums * 0.060 + 'px';
        var width2 = nums * 0.065 + 'px';
        var width4 = nums * 0.065 + 'px';
        var width5 = nums * 0.105 + 'px';
        var width6 = nums * 0.065 + 'px';
        var width7 = nums * 0.065 + 'px';
        //表格初始化
        pageObj=$.tablePage('#pagediv',sumwidth,[
            {
                width:width0,
                title:'客户名称',
                name:'customerName',
                selectFun:function (n,obj) {
                    if(obj.customerName==undefined){
                        return "";
                    }else{
                        return '<a title='+obj.customerName+'>'+obj.customerName+'</a>';
                    }
                }
            },
            {
                width:width2,
                title:'客户经理',
                name:'customerManager',
                selectFun:function (n,obj) {
                    if(obj.customerManager==undefined){
                        return "";
                    }else{
                        return obj.customerManager;
                    }
                }
            },
            {
                width:width1,
                title:'客户级别',
                name:'customerLevel',
                selectFun:function (n,obj) {
                    if(obj.customerLevel==undefined){
                        return ""
                    }else if (obj.customerLevel==''){
                        return "";
                    }else if (obj.customerLevel=="01") {
                        return "A(重要客户)";
                    }else if (obj.customerLevel=="02") {
                        return "B(普通客户)";
                    }else if (obj.customerLevel=="03") {
                        return "C(一般客户)";
                    }else if (obj.customerLevel=="04") {
                        return "D(不重要客户)";
                    }
                }
            },
            {
                width:width1,
                title:'客户状态',
                name:'customerStatus',
                selectFun:function (n,obj) {
                    if(obj.customerStatus==undefined){
                        return "";

                    }else if (obj.customerStatus==''){
                        return "";
                    }else if (obj.customerStatus=="01") {
                        return "初步接触";
                    }else if (obj.customerStatus=="02") {
                        return "客户拜访";
                    }else if (obj.customerStatus=="03") {
                        return "需求沟通";
                    }else if (obj.customerStatus=="04") {
                        return "方案报价";
                    }else if (obj.customerStatus=="05") {
                        return "商务谈判";
                    }else if (obj.customerStatus=="06") {
                        return "签约成功";
                    }
                }
            },
            {
                width:width4,
                title:'客户来源',
                name:'customerFrom ',
                selectFun:function (n,obj) {
                    if(obj.customerFrom==undefined){
                        return "";
                    }else if (obj.customerFrom==''){
                        return "";
                    }else if (obj.customerFrom=="01") {
                        return "广告推广";
                    }else if (obj.customerFrom=="02") {
                        return "会议营销";
                    }else if (obj.customerFrom=="03") {
                        return "客户介绍";
                    }else if (obj.customerFrom=="04") {
                        return "网上搜索";
                    }else if (obj.customerFrom=="05") {
                        return "渠道拓展";
                    }else if (obj.customerFrom=="06") {
                        return "伙伴介绍";
                    }else if (obj.customerFrom=="07") {
                        return "独立开发";
                    }else if (obj.customerFrom=="08") {
                        return "社群营销";
                    }
                }
            },
            {
                width:width5,
                title:'公司地址',
                name:'address',
                selectFun:function (n,obj) {
                    if(obj.address==undefined){
                        return "";
                    }else{
                        return '<a title='+obj.address+'>'+obj.address+'</a>';
                    }
                }
            },
            {
                width:width6,
                title:'创建人',
                name:'creator',
                selectFun:function (n,obj) {
                    if(obj.creator==undefined){
                        return "";
                    }else{
                        return obj.creator;
                    }
                }
            },
            {
                width:width7,
                title:'操作',
                name:'orgAddress'
            }
        ],function (me) {
//          me.obj.codeId=$('[name="type"]').val();
            me.data.pageSize=10;
            //1显示  // 2不显示  //不写fn这个属性就是全显示
            me.init(url,[
                {
                    name:'跟进',
                    fn: function (obj) {
                        return '跟进';
                    }
                },
                {
                    name:'删除',
                    fn:function(obj) {
                        if (obj.type == 0 || obj.type == 2) {
                            return '删除';
                        } else {
                            return 0;
                        }
                    }
                },
            ],function () {});
            $('#query_btn').click(function () {
                var keyWords=$('#keyWords').val();
                me.data.customerName = keyWords;
                if($('#startTime').val()!=""&&$('#endTime').val()!=""){
                    me.data.createdTimeStr=$('#startTime').val();
                    me.data.createdTimeEnd=$('#endTime').val();
                }else if($('#startTime').val()==""&&$('#endTime').val()!=""){
                    me.data.createdTimeStr=$('#startTime').val();
                    me.data.createdTimeEnd=$('#endTime').val();
                }else if($('#startTime').val()!=""&&$('#endTime').val()==""){
                    me.data.createdTimeStr=$('#startTime').val();
                    me.data.createdTimeEnd=$('#endTime').val();
                }else{
                    me.data.createdTimeStr=undefined
                    me.data.createdTimeEnd=undefined
                }
                //每次模糊查询时初始化页码从第一页开始查询
                pageObj.data.page = 1;
                hideRight()
            });
            $('[name="customerFrom"]').change(function () {
                pageObj.data.customerFrom = $('.index_content_3 option:selected').val().toString()
                hideRight()
            });
            $('.index_content_3 span').click(function () {
                hideRight()
            });
            $('[name="customerFrom"]').change(function () {
                if ($('.index_content_3 option:selected').val().toString()=="undefined") {
                    pageObj.data.customerFrom=undefined
                }else {
                    pageObj.data.customerFrom = $('.index_content_3 option:selected').val().toString();
                }
                hideRight()
            });
            $('#biaodan').click(function () {
               
            });
            $(".content_label").on("click","li",function(){
                pageObj.data.customerStatus = $('.index_content_1 .one').attr('codeNo');
                pageObj.data.customerLevel = $('.index_content_2 .one').attr('codeNo');
                hideRight()
            });
            $('#pageTbody').on('click', 'td:not(:last-child)', function () {
                var customerId = pageObj.arrs[$(this).parent().find('.editAndDelete0').attr('data-i')].customerId;
                var type = pageObj.arrs[$(this).parent().find('.editAndDelete0').attr('data-i')].type;
                $("#pop-up").css("display","block");
                $("#pop-up").animate({right:'0px'},"slow");
                var val=$('.active').attr("id");
                if(val=='allClient'){
                    $('#childFrame').attr('src','/customer/updateWorkbench?customerId='+customerId+'&allType='+type);
                }else if(val=='myClient'){
                    $('#childFrame').attr('src','/customer/updateWorkbench?customerId='+customerId+'&type='+type);
                }
            })
        });
        //根据id跟进数据
        $('#pageTbody').on('click','.editAndDelete0',function(){
            var customerId = pageObj.arrs[$(this).attr('data-i')].customerId;
            location.href = '/customer/followWorkbench?customerId='+customerId;
        });
        $(document).on('mouseenter', '#pageTbody tr', function(){
            $(this).attr('title','查看详情')
        })
        //ajax 根据orgId 删除数据
        $('#pageTbody').on('click','.editAndDelete1',function(){
            var customerId=0
            if(pageObj.arrs[$(this).attr('data-i')]!=undefined){
                customerId=pageObj.arrs[$(this).attr('data-i')].customerId;
            }
            layer.confirm(qued,{
                btn: [sure,cancel], //按钮
                title:'确定删除？'
            }, function(){
                $.ajax({
                    type:'post',
                    url:'/customer/deleteCustomer',
                    dataType:'json',
                    data:{'customerId':customerId},
                    success: function (json) {
                        //第三方扩展皮肤
                        layer.msg('<fmt:message code="workflow.th.delsucess" />', {icon: 6});
                        location.reload();
                    }
                })
            }, function () {
                layer.closeAll();
            })
        });
    });
    //根据type判断是否显示我的客户、下属客户
    function client() {
        $.ajax({
            url:'/customer/powerCustomer',
            type:'get',
            dataType:'json',
            success: function (data) {
                if(data.flag){
                    if(data.object==2){
                        $('.navRight').css('display','none')
                    }else if(data.object==1){
                        $('.navRight').css('display','block')
                    }
                }
            }
        })
    }

    //导出Excel
    function clicked1() {
        window.location.href = deriveUrl
    }
    function hideRight() {
        pageObj.init(url);
        if($('#pop-up').css("display")=='block'){
            $("#pop-up").css("display","none");
            $("#pop-up").css("right",'-600px');
        }
    }
</script>
</html>
